<template>
	<!-- 工作中心-工位树 -->
	<el-dialog v-model="isShowDialog" :title="props.title" :width="1400" draggable="">
		<el-row>
			<el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
				<el-card>
					<template #header>
						<div class="card-header">
							<span>选中的用户</span>
						</div>
					</template>
					<el-table :data="selectUserList" border>
						<el-table-column prop="account" label="账号" width="120" align="center" fixed
							show-overflow-tooltip />
						<el-table-column prop="nickName" label="昵称" width="120" align="center" show-overflow-tooltip />
						<el-table-column prop="realName" label="姓名" width="120" align="center" show-overflow-tooltip />
					</el-table>
				</el-card>
			</el-col>
			<el-col :xs="24" :sm="16" :md="16" :lg="16" :xl="16">
				<el-card>
					<template #header>
						<div class="card-header">
							<span>指定工位权限</span>
						</div>
					</template>
					<div class="custom-tree-node-container">
						<el-input v-model="filterText" placeholder="输入需要搜索的工位" />
						<el-tree :data="treeData" show-checkbox node-key="id" :filter-node-method="filterNode"
							ref="treeRef" :props="{ children: 'children', label: 'label', class: treeNodeClass }"
							icon="ele-Menu" />
					</div>
				</el-card>
			</el-col>
		</el-row>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="cancel">取 消</el-button>
				<el-button type="primary" @click="submit">确 定</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script lang="ts" setup>
	import { ref, reactive, onMounted, nextTick, watch } from "vue";
	import request from '/@/utils/request';
	import type Node from 'element-plus/es/components/tree/src/model/node';
	import { ElTree, ElMessage } from 'element-plus';
	var props = defineProps({
		title: {
			type: String,
			default: "",
		}
	});
	const selectUserList = ref([]);
	const treeData = ref([]); //工作中心-工位树
	const treeEveryIds = ref([]);
	const defaultCheckKeys = ref([]); //默认选中的工位
	const isShowDialog = ref(false);
	const filterText = ref('')
	const treeRef = ref<InstanceType<typeof ElTree>>();

	const emit = defineEmits(["reloadTable"]);
	const customNodeClass = (data : any, node : Node) => {
		if (data.isStation) {
			return 'is-station'
		}
		return null
	}



	// 打开弹窗
	const openDialog = async (rows : any) => {
		selectUserList.value = rows;
		treeRef.value?.setCheckedKeys([]); // 清空选中值
		await handleQuery();
		if (rows.length == 1) {
			var checkIds = [];
			rows[0].keyPathList.forEach(r => {
				var check = treeEveryIds.value.find(c => c.value == r);
				if (check != null)
					checkIds.push(check.id);
			});
			setTimeout(() => {
				treeRef.value?.setCheckedKeys(checkIds);
			}, 300);

		}
		isShowDialog.value = true;
	};

	// 关闭弹窗
	const closeDialog = () => {
		emit("reloadTable");
		isShowDialog.value = false;
	};

	// 取消
	const cancel = () => {
		isShowDialog.value = false;
	};

	const handleQuery = async () => {
		var res = await request({
			url: `/api/customdataisolation/workcenterstationtree`,
			method: 'get'
		});
		console.log(res.data);
		treeData.value = res.data.result.tree;
		treeEveryIds.value = res.data.result.treeEveryIds;
	};
	watch(filterText, (val) => {
		treeRef.value!.filter(val)
	});
	const filterNode = (value : string, data : any) => {
		if (!value) return true
		return data.label.includes(value)
	}
	// 叶子节点同行显示样式
	const treeNodeClass = (node : any) => {
		let addClass = true; // 添加叶子节点同行显示样式
		for (var key in node.children) {
			// 如果存在子节点非叶子节点，不添加样式
			if (node.children[key].children?.length ?? 0 > 0) {
				addClass = false;
				break;
			}
		}
		return addClass ? 'penultimate-node' : '';
	};
	//确定
	const submit = async () => {
		var checkNodes = treeRef.value?.getCheckedNodes();
		if (checkNodes == null || checkNodes.length <= 0) {
			ElMessage.error('请选择对应的工位权限！');
			return;
		}
		if (selectUserList == null || selectUserList.value.length <= 0) {
			ElMessage.error('请选择系统用户！');
			return;
		}
		var keyPathList = checkNodes.map(r => r.keyPath);
		var userIds = selectUserList.value.map(r => r.id);

		await request({
			url: `/api/customdataisolation/setSysUserWorkCenterStation`,
			method: 'post',
			data: {
				UserIds: userIds,
				KeyPathList: keyPathList,
				StationCodeList: checkNodes.map(r => r.keyPathString)
			}
		});
		closeDialog();
	}
	//将属性或者函数暴露给父组件
	defineExpose({ openDialog });
</script>

<style lang="scss" scoped>
	.menu-data-tree {
		width: 100%;
		border: 1px solid var(--el-border-color);
		border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
		padding: 5px;
	}

	:deep(.penultimate-node) {
		.el-tree-node__children {
			padding-left: 40px;
			white-space: pre-wrap;
			line-height: 100%;

			.el-tree-node {
				display: inline-block;
			}

			.el-tree-node__content {
				padding-left: 5px !important;
				padding-right: 5px;

				// .el-tree-node__expand-icon {
				// 	display: none;
				// }
			}
		}
	}
</style>